<template>
  <Person />
  <RefComponent />
  <ComputedComp />
  <WatchComp />
  <WatchComp2 />
  <WatchComp3 />
  <WatchComp4 />
  <WatchComp5 />
  <WatchEffectComp />
  <RefDom ref="refDom" />
  <PropsTS />
  <LifeComp />
  <HookComp />
</template>
<script setup lang="ts">
import Person from "./components/Person.vue";
import RefComponent from "./components/RefComponent.vue";
import ComputedComp from "./components/ComputedComp.vue";
import WatchComp from "./components/WatchComp.vue";
import WatchComp2 from "./components/WatchComp2.vue";
import WatchComp3 from "./components/WatchComp3.vue";
import WatchComp4 from "./components/WatchComp4.vue";
import WatchComp5 from "./components/WatchComp5.vue";
import WatchEffectComp from "./components/WatchEffectComp.vue";
import RefDom from "./components/RefDom.vue";
import PropsTS from "./components/PropsTS.vue";
import LifeComp from "./components/LifeComp.vue";

import { ref, onMounted } from "vue";
import HookComp from "./components/HookComp.vue";

const refDom = ref();
onMounted(() => {
  console.log("父组件挂载完成");
  console.log(refDom.value);
  console.log(refDom.value.a);
  console.log(refDom.value.b);
  refDom.value.changeDom(); //父组件用ref，用在组件上获取子组件的属性与方法使用
});
</script>

<style scoped></style>
